<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">身份认证</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		
		<view class="userAccountInfo" v-if="show">
			<u--form labelPosition="left">
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">账户类型</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.type==1?'个人':'企业'"
							class="inputStyle" />
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">{{userAccount.type==1?"姓名":"企业名称"}}</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.memberName"
							class="inputStyle" />
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">账户</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.subAcc"
							class="inputStyle" />
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">邮箱</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.email"
							class="inputStyle" />
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false" v-show="userAccount.phone">
					<view class="formInput">
						<view class="label">手机号</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.phone"
							class="inputStyle" />
					</view>
				</u-form-item>
				
				<view v-if="userAccount.type == 0">
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">法人姓名</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.businessName"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">企业联系人</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.contact"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">联系地址</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.contactAddr"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">企业联系电话号码</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.contactPhone"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">社会统一信用代码</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.papersCode"
								class="inputStyle" />
						</view>
					</u-form-item>
				</view>
			</u--form>
		</view>
		
		<view class="openBox" v-else>
			<view class="form">
				<u--form labelPosition="left" ref="form">
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">{{form.type==1?"真实姓名":"企业名称"}}</view>
							<input placeholder-class="placeholderStyle" :placeholder="form.type==1?'请输入真实姓名':'请输入企业名称'"
							 v-model="form.memberName" class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">{{form.type==1?"证件号码":"社会统一信用代码"}}</view>
							<input placeholder-class="placeholderStyle" :placeholder="form.type==1?'请输入证件号码':'请输入社会统一信用代码'"
							 v-model="form.papersCode" class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">手机号</view>
							<input placeholder-class="placeholderStyle" placeholder="请输入手机号"
							 v-model="form.phone" class="inputStyle" maxlength="11" type="number" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">邮箱</view>
							<input placeholder-class="placeholderStyle" placeholder="请输入邮箱"
							 v-model="form.email" class="inputStyle" />
						</view>
					</u-form-item>
					
					<view v-show="form.type == 0">
						<u-form-item :border-bottom="false">
							<view class="formInput">
								<view class="label">法人姓名</view>
								<input placeholder-class="placeholderStyle" placeholder="请输入法人姓名" v-model="form.businessName"
									class="inputStyle" />
							</view>
						</u-form-item>
						<u-form-item :border-bottom="false">
							<view class="formInput">
								<view class="label">法人证件号码</view>
								<input placeholder-class="placeholderStyle" placeholder="请输入法人证件号码" v-model="form.certNo"
									class="inputStyle" />
							</view>
						</u-form-item>
						<u-form-item :border-bottom="false">
							<view class="formInput">
								<view class="label">企业联系人</view>
								<input placeholder-class="placeholderStyle" placeholder="请输入企业联系人" v-model="form.contact"
									class="inputStyle" />
							</view>
						</u-form-item>
						<u-form-item :border-bottom="false">
							<view class="formInput">
								<view class="label">联系地址</view>
								<input placeholder-class="placeholderStyle" placeholder="请输入联系地址" v-model="form.contactAddr"
									class="inputStyle" />
							</view>
						</u-form-item>
						<u-form-item :border-bottom="false">
							<view class="formInput">
								<view class="label">企业手机号</view>
								<input placeholder-class="placeholderStyle" type="number" maxlength="11" placeholder="请输入企业手机号" v-model="form.contactPhone"
									class="inputStyle" />
							</view>
						</u-form-item>
					</view>
				</u--form>
			</view>
			<view class="submit-bottom">
				<view class="submit-btn" @tap="open">人脸识别认证</view>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {getAccountData,initFaceVerify} from '../../api/user.js'
	import {mapState } from 'vuex'; 
	import axios from 'axios'
	import { isIdCard, validateEmail,isCellPhone } from '@/common/proof-technique.js';
	export default {
		data(){
			return {
				form:{
					email:"",
					memberName:"",
					papersCode:"",
					type:1,
					phone:"",
					businessName:"",//法人姓名
					contact:"",
					contactAddr:"",
					contactPhone:"",
					
					certNo:"",//法人身份证
				},
				userAccount:{},
				show:true
			}
		},
		onLoad(opt) {
			var script = document.createElement('script');
			script.id = "authentication";
			script.src = "https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js";
			document.head.appendChild(script);
			if(opt){
				this.form.type = opt.type;
			}
		},
		onShow() {
			this.getAccount();
		},
		methods:{
			getAccount(){
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getAccountData({}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						data.subAcc = (data.subAcc).substring(0,5) + "******" + (data.subAcc).substring(13,17);
						if(data.phone){
						  data.phone = (data.phone).substring(0,3) + "******" + (data.phone).substring(7,11);
						}
						if(data.contactPhone){
						  data.contactPhone = (data.contactPhone).substring(0,3) + "******" + (data.contactPhone).substring(7,11);
						}
						this.userAccount = data;
						this.show = true;
					} else {
						this.show = false;
					}
				}).catch(err => {
					this.$u.toast('网络错误');
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			open(){
				let obj = this.form,urls = location.origin+"/openAccount/submitSucces",
					codeUid = new Date().getTime(),
					token = uni.getStorageSync('newToken').token,
					metaInfo = getMetaInfo();
					
				if(this.rulesData()){
					this.$refs.min_loading.open('请稍后！');
					initFaceVerify({
						...obj,
						sucesUrl:urls,
						memberName:obj.type==1?obj.memberName:obj.businessName,
						metaInfo:JSON.stringify(metaInfo),
						papersCode:obj.type==1?obj.papersCode:obj.certNo
					}).then(res => {
						if (res.data.success) {
							try {
								uni.setStorageSync('openAccountObj', {...obj,certifyId:res.data.obj.CertifyId,requestId:res.data.obj.requestId});
							} catch (e) {
								// error
							}
							location.href = res.data.obj.CertifyUrl;
						} else {
							this.$u.toast(res.data.msg);
						}
					}).catch(err => {
						this.$u.toast('网络错误');
					}).finally(() => {
						this.$refs.min_loading.close();
					});
				}
			},
			rulesData(){
				let obj = this.form;
				const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/,
					  idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
					  regName = /^[\u00B7\u3007\u3400-\u9FFF\uE000-\uF8FF\uF900-\uFAFF\u{20000}-\u{2FFFF}\u{30000}-\u{3FFFF}]+$/u,
					  regemail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				if(this.form.type == 1){//个人
					if(obj.memberName == "" || (!regName.test(obj.memberName))){
						this.$u.toast('请输入真实姓名！');
						return false;
					}else if(obj.papersCode == "" || (!idcardReg.test(obj.papersCode))){
						this.$u.toast('请输入正确的证件号码！');
						return false;
					}else if(obj.phone == '' || obj.phone == undefined || obj.phone == null){
						this.$u.toast('请输入手机号！');
						return false;
					}else if((!regPhone.test(obj.phone)) && obj.phone != ''){
						this.$u.toast('请输入正确的手机号！');
						return false;
					}else if(obj.email == '' || obj.email == undefined || obj.email == null || ((!regemail.test(obj.email)) && obj.email != '')){
						this.$u.toast('请输入正确的邮箱！');
						return false;
					}else{
						return true;
					}
				}else{
					if(obj.memberName == ""){
						this.$u.toast('请输入企业名称！');
						return false;
					}else if(obj.papersCode == ""){
						this.$u.toast('请输入社会统一信用代码！');
						return false;
					}else if(obj.phone == '' || obj.phone == undefined || obj.phone == null){
						this.$u.toast('请输入手机号！');
						return false;
					}else if((!regPhone.test(obj.phone)) && obj.phone != ''){
						this.$u.toast('请输入正确的手机号！');
						return false;
					}else if(obj.email == '' || obj.email == undefined || obj.email == null || ((!regemail.test(obj.email)) && obj.email != '')){
						this.$u.toast('请输入正确的邮箱！');
						return false;
					}else if(obj.businessName == "" || (!regName.test(obj.businessName))){
						this.$u.toast('请输入正确的法人姓名！');
						return false;
					}else if(obj.certNo == "" || (!idcardReg.test(obj.certNo))){
						this.$u.toast('请输入正确的法人证件号码！');
						return false;
					}else if(obj.contact == "" || (!regName.test(obj.contact))){
						this.$u.toast('请输入正确的企业联系人姓名！');
						return false;
					}else if(obj.contactAddr == ""){
						this.$u.toast('请输入联系地址！');
						return false;
					}else if(obj.contactPhone == "" || (!regPhone.test(obj.phone))){
						this.$u.toast('请输入正确的企业手机号！');
						return false;
					}else{
						return true;
					}
				}
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		},
		computed:{
			...mapState(["hasLogin"]),
			userData(){
			  let data = {};
			  if(this.$store.state.hasLogin && this.$store.state.uerInfo){
				data = this.$store.state.uerInfo;
			  }
			  return data;
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding: 160upx 0upx 260upx;
		background-color: #fff;
		.openBox,.userAccountInfo{padding: 0 58upx;}
		.formInput{
			width: 100%;
			border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
			padding-bottom: 10upx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			// justify-content: space-between;
			.label{
				width: 100%;
				color: #333;
				font-size: 30upx;
				font-weight: bold;
				margin-bottom: 20upx;
			}
			.inputStyle{
				color: #333;
			}
			input{
				flex: 1%;
				font-size: 24upx;
				color: #333;
			}
		}
		.imgCodeBox{
			.label{margin: 0;width: 180upx;}
			.imgCode{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 200upx;
					height: 60upx;
				}
				input{
					flex: 1%;
				}
			}
		}
		.codeBox{
			.label{width: 180upx;}
			.send-con{
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding-right: 20upx;
				.send{
					color:#AEAEAE;
				}
			}
		}
		.submit-bottom{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding:30upx 40upx;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			.submit-btn{
				width: 100%;
				height: 100upx;
				font-size: 30upx;
				font-weight: 400;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #2C1769;
			}
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
	}
</style>
